<template>
    <div>
        <div class="header">
            <div>全部分类</div>
        </div>
        <div class="tab">
            <div class="tabNav">
                <ul>
                    <li v-for="(item,index) of list" @click="click(index)" :class="{active: index == current}">{{item.name}}</li>
                </ul>
            </div>
            <div class="wrapper" >
                <div class="tabCont" v-for="(item,index) of list" v-show="show(index)">
                    <ul>
                        <li v-for="(item2,index) of item.contList">
                            <h2>{{item2.title}}</h2>
                            <ul>
                                <li v-for="(item3,index) of item2.cont">
                                    <img :src="item3.img" alt="" :class="item2.num == 1 ? 'change': '' ">
                                    <p>{{item3.text}}</p>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        name:"NavHeader",
        props:{
            list:Array
        },
        data (){
            return {
                current:""
            }
        },
        methods:{
            click(index){
                this.current = index
                console.log(this.index)
            },
            show(index){
                if(this.current == index){
                    return true
                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
.header
    width 3.75rem
    height 0.44rem
    overflow: hidden
    background: #EEE
    div
        font-weight: 400
        float: left
        width: 23%
        text-align: center
        line-height: 0.44rem
        color: #333
        font-size: 0.14rem
  .tab
    width: 100%
    overflow: hidden
    position: absolute
    top: 0.44rem
    bottom: 0
    background-color: #fff
    .recommended
        position: absolute
        width 23%
        height 0.6rem
        line-height 0.6rem
        text-align center
        z-index: 9999
        font-size: 0.14rem
        background-color #fff
        border-right 1px solid #fff
    .tabNav
        width 23%
        float left
        height: 100%;
        overflow-y: auto
        overflow-x: hidden
        background: #EEE
        color: #9B9B9B
        font-size: 0.14rem
        text-align: center
        >ul
            width 100%
            >li
                height 0.6rem
                line-height 0.6rem
                text-align center
                font-size 0.14rem
                border-bottom 1px solid #E1E1E1
                border-right 1px solid #E1E1E1
    .wrapper
        width 77% 
        height 100%
        overflow-y: auto
        overflow-x: hidden        
        .tabCont
            width 100%
            float left
            >ul
               padding 0.2rem
               >li
                   margin-top 0.1rem
                   ul
                       width 100%
                       li
                           width 33.333%
                           float left
                           margin-top 0.2rem
                           text-align center
                           img
                               width 0.67rem
                               height 0.67rem
                           p
                               line-height: 0.23rem
                               height: 0.23rem
                               padding: 0.04rem 0
                               font-size: 0.14rem
                               color: #5D5D5D
                               text-align: center
                               white-space: nowrap
                               overflow: hidden
                               text-overflow: ellipsis
                            .change
                                width 0.67rem
                                height 0.34rem   
    .active
        background-color #fff
        border-right 1px solid #fff !important
</style>

